<!--配送商端-销售管理-跟台手术需求订单列表-详情-->
<template>
  <div class="detail">
    <div class="top-info-box">
      <div
        class="top-info-item"
        v-for="(item,index) in topInfo"
        :key="index">
        <span class="text-left">{{ item.label }}</span>
        <span>{{ topData[item.value]===7?'已撤销':topData[item.value] }}</span>
      </div>
    </div>
    <!-- 发货信息 -->
    <div class="part-title">发货信息</div>
    <el-container
      class="container-box"
      v-loading="deliveryLoading">
      <div
        v-for="(item,deliveryIndex) in orderDeliveryData"
        :key="deliveryIndex"
        class="to-good-box">
        <!-- 订单编号 -->
        <div class="info-box">
          <p>配送单号：{{ item.deliveryCode }}</p>
          <p>配送时间：{{ item.createdAt }}</p>
          <p>配送单数量：{{ item.sendNumCount }}</p>
          <p>订单金额（￥）：{{ item.sumPrice }}</p>
        </div>
        <!-- 订单数据 -->
        <el-editable
          class="table-box"
          :data="item.needItemList"
          height="200"
          :columns="operationDetailColumns"
        >
          <template
            slot="default-placeholder"
            slot-scope="scope">
            <el-editable
              :data="scope.row.distributorList"
              height="200"
              :columns="operationDetailColumnsInside"
            />
          </template>
          <!-- 规格型号 -->
          <template
            slot="default-specification"
            slot-scope="scope">
            <span>{{ scope.row.specification || '' }} {{ scope.row.productType || '' }}</span>
          </template>
        </el-editable>
      </div>
    </el-container>
    <!-- 退回明细 -->
    <div class="part-title">退回明细</div>
    <div class="return-box-info">
      <p>术后退回单号：{{ returnDataInfo.operateReturnCode }}</p>
      <p>退回时间：{{ returnDataInfo.createdAt }}</p>
      <p>退回单数量：{{ returnDataInfo.operateReturnNum }}</p>
      <p>退回金额：{{ returnDataInfo.operateReturnAmount }}</p>
    </div>
    <el-editable
      v-loading="returnLoading"
      class="table-box"
      :data="returnData"
      height="200"
      :columns="operationDetailColumns"
    >
      <template
        slot="default-placeholder"
        slot-scope="scope">
        <el-editable
          class="inside-table-box"
          :data="scope.row.detailVOS"
          height="200"
          :columns="operationDetailColumnsInside"
        />
      </template>
    </el-editable>
  </div>
</template>

<script>
import ElEditable from '@components/el-editable/index.vue'
import {
  DETAIL_TOP_INFO,
  DETAIL_TABLE_COLUMNS,
  DEATIL_INDISE_COLUMNS
} from './const.js'
import { isObject, cloneDeep } from 'lodash'
import { PAGE_NUMBER, PAGINATION_LAYOUT } from '@const/common.js'
import {
  followOrderDetail,
  orderDeliveryDetail,
  ocBsOperateItemList,
  returnOneInfo
} from '@const/beforeSettleApi'

export default {
  name: 'Detail',
  components: { ElEditable },

  data () {
    return {
      topInfo: DETAIL_TOP_INFO,
      operationDetailColumns: DETAIL_TABLE_COLUMNS,
      operationDetailColumnsInside: DEATIL_INDISE_COLUMNS,
      topData: {}, // 订单基本信息
      orderDeliveryData: [], // 订单发货详情，可能有多次发货，对象数组
      tableLoading: false,
      returnLoading: false,
      deliveryLoading: false,
      returnData: [],
      returnDataInfo: []
    }
  },
  computed: {
    id () {
      return this.$route.query.id
    }
  },
  mounted () {
    this.getOrderInfoDetail()
    this.getOrderDeliveryDetail()
    this.getReturnDetail()
    this.getReturnDetailInfo()
  },
  methods: {
    // 获取退回数据
    getReturnDetail () {
      this.returnLoading = true
      this.$axios
        .$post(ocBsOperateItemList + `?id=${this.id}`)
        .then(res => {
          if (Number(res.code) === 0) {
            this.returnData = res.payload || []
          }
        })
        .catch(e => {})
        .finally(() => {
          this.returnLoading = false
        })
    },
    // 获取退回数据
    getReturnDetailInfo () {
      this.$axios.$post(returnOneInfo + `?id=${this.id}`).then(res => {
        if (Number(res.code) === 0) {
          this.returnDataInfo = res.payload || {}
        }
      })
    },
    // 订单信息
    getOrderInfoDetail () {
      this.tableLoading = true
      const postData = {
        id: this.id
      }
      this.$axios
        .$post(followOrderDetail + `?id=${this.id}`)
        .then(res => {
          if (Number(res.code) === 0) {
            this.topData = res.payload
          }
        })
        .catch(e => {})
        .finally(() => {
          this.tableLoading = false
        })
    },
    // 获取发货明细
    getOrderDeliveryDetail () {
      const type = 3 // 2寄售3跟台
      this.deliveryLoading = true
      this.$axios
        .$get(orderDeliveryDetail + `?id=${this.id}&type=${type}`)
        .then(res => {
          if (Number(res.code) === 0) {
            this.orderDeliveryData = res.payload || []
          }
        })
        .catch(e => {})
        .finally(() => {
          this.deliveryLoading = false
        })
    }
  }
}
</script>

<style lang="less">
@import '../m-front-common/pc/assets/var.less';
@textColor: #26344c;
@grayColor: #a7b1c7;

.detail {
  .return-box-info {
    display: flex;

    p {
      padding: 10px;
      padding-right: 20px;
    }
  }

  .top-info-box {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;

    .top-info-item {
      width: 25%;
      font-size: @defaultFontSize;
      color: @textColor;
      font-weight: 400;
      padding-bottom: 20px;

      .text-left {
        color: @grayColor;
        padding-right: 10px;
        width: 100px;
        text-align: right;
        display: inline-block;
      }
    }
  }

  .part-title {
    font-size: 18px;
    font-weight: 600;
    width: 100%;
    display: block;
    margin: 10px 0;
  }

  .container-box {
    .to-good-box {
      width: 100%;
      .info-box {
        display: flex;
        margin-bottom: 10px;
        p {
          margin-right: 20px;
        }
      }
    }
    .top-form {
      display: flex;
    }

    .collapse-box {
      width: 100%;

      .top-info-box {
        width: 100%;

        .top-info-item {
          padding-bottom: 0;
        }
      }

      .title-box {
        width: 100%;
      }

      .form-box {
        width: 500px;
        float: left;
      }

      .submission-box {
        float: right;
        margin-right: 10px;
      }
    }

    .operation-details-form {
      display: flex;
    }

    .addbutton {
      border: none;
      background: none;
      color: rgba(35, 113, 197, 1);
    }

    .submission {
      background: rgba(35, 113, 197, 1);
      border: 0;
      color: #fff;
      margin-bottom: 10px;
    }

    .topInput {
      width: 211px;
    }

    .formToptext {
      margin-bottom: 20px;

      .el-form-item {
        margin-right: 16px;
        margin-bottom: 16px;

        .textBox {
          width: 220px;
        }
      }

      .el-form-item__label {
        padding-right: 10px;
      }
    }
  }
}
</style>
